<template>
  <canvas @mousemove="mousemove" @mousedown="mousedown" @mouseup="mouseup" width="600" height="500"></canvas>
</template>
<style>
canvas {
  border: 1px solid #000;
  width: 600px;
  height: 500px
}
</style>
<script setup>
import {onMounted, ref} from "vue";

const CW = 600
const CH = 500
const SPAN = 40

let space = ref(6)
let trans = ref(0)
let maxVal = 2500

let canvas = ref(null)
let ctx = ref(null)
let leftDrapLineX = ref(0)
let rightDrapLineX = ref(0)
onMounted(() => {
  canvas.value = document.querySelector('canvas')
  ctx.value = canvas.value.getContext('2d')
  leftDrapLineX.value = SPAN
  rightDrapLineX.value = CW - SPAN

  drawAll()
})


let isDown = ref(false);
let tx1 = ref(0);
let initVal = ref(0);
let drapState = ref(null)
let mousedown = (e) => {

  if (e.offsetX >= leftDrapLineX.value - 5 && e.offsetX <= leftDrapLineX.value + 5) {
    console.log('在左侧拖拽线上')
    drapState.value = 'left'
    return
  } else if (e.offsetX >= rightDrapLineX.value - 5 && e.offsetX <= rightDrapLineX.value + 5) {
    console.log('在右侧拖拽线上')
    drapState.value = 'right'
    return
  }


  isDown.value = true;
  tx1.value = trans.value;
  initVal.value = e.offsetX;
}
let mousemove = (e) => {

  if (drapState.value === 'left') {
    console.log('在左侧拖拽线上')
    leftDrapLineX.value = e.offsetX;
    drawAll()
  } else if (drapState.value === 'right') {
    console.log('在右侧拖拽线上')
    rightDrapLineX.value = e.offsetX;
    drawAll()
  }

  if (isDown.value) {
    // 每次滑动space
    // trans.value = e.offsetX - initVal.value > 0 ? trans.value + space.value : trans.value - space.value;
    // initVal.value = e.offsetX;

    // 跟随鼠标滑动
    trans.value = e.offsetX - initVal.value + tx1.value

    // console.log(e)
    drawAll()
  }
}
let mouseup = (e) => {
  isDown.value = false;
  drapState.value = null
}

const drawAll = () => {
  ctx.value.clearRect(0, 0, CW, CH)
  drawAxis()
  drawDrapLine()
  drawDataLine()
}
const drawDrapLine = () => {
  drawLine(leftDrapLineX.value, SPAN, leftDrapLineX.value, CH)
  drawLine(rightDrapLineX.value + 2, SPAN, rightDrapLineX.value + 2, CH)
}
const drawDataLine = (data) => {
  let list = [
    {time: '0ms', value: 0},
    {time: '12.5ms', value: 10},
    {time: '25ms', value: 0},
    {time: '37.5ms', value: 10},
    {time: '50ms', value: 0},
    {time: '37.5ms', value: 10},
    {time: '50ms', value: 0},
    {time: '37.5ms', value: 10},
    {time: '50ms', value: 0},
    {time: '37.5ms', value: 10},
    {time: '50ms', value: 0},
    {time: '37.5ms', value: 10},
    {time: '50ms', value: 0},
    {time: '37.5ms', value: 10},
    {time: '50ms', value: 0},
    {time: '37.5ms', value: 10},
    {time: '50ms', value: 0},
    {time: '37.5ms', value: 10},
    {time: '50ms', value: 0},
    {time: '37.5ms', value: 10},
    {time: '50ms', value: 0},
    {time: '37.5ms', value: 10},
    {time: '50ms', value: 0},
    {time: '37.5ms', value: 10},
    {time: '50ms', value: 0},
    {time: '37.5ms', value: 10},
    {time: '50ms', value: 0},
    {time: '37.5ms', value: 10},
    {time: '50ms', value: 0},
    {time: '37.5ms', value: 10},
    {time: '50ms', value: 0},
    {time: '37.5ms', value: 10},
    {time: '50ms', value: 0},
  ]

  let basis = SPAN + 100
  ctx.value.beginPath()
  ctx.value.moveTo(SPAN + trans.value, basis + list[0].value)
  for (let i = 1; i < list.length - 1; i++) {
    let x = SPAN + (i * space.value) + trans.value,
        value = list[i].value

    ctx.value.lineTo(x, basis + value)
  }
  ctx.value.stroke()
}
const drawAxis = () => {
  ctx.value.strokeStyle = '#000'

  drawLine(SPAN + trans.value, SPAN, maxVal + trans.value, SPAN)


  for (let i = SPAN; i <= maxVal; i++) {

    let z = i - SPAN

    let txt = Math.ceil(z * (250 / (space.value * 20)).toFixed(2)) // 250/120
    if (z % (space.value * 20) === 0) {
      drawTxt(txt + '.0ms', i + trans.value, SPAN - 20)
    }

    if (z % (space.value * 20) === 0) {
      drawLine(i + trans.value, SPAN, i + trans.value, SPAN - 15)
    } else if (z % (space.value * 10) === 0) {
      drawLine(i + trans.value, SPAN, i + trans.value, SPAN - 10)
    } else if (z % space.value === 0) {
      drawLine(i + trans.value, SPAN, i + trans.value, SPAN - 5)
    }

  }
}
const drawTxt = (txt, x, y) => {
  ctx.value.textAlign = 'center'
  ctx.value.fillText(txt, x, y)
}
const drawLine = (x1, y1, x2, y2) => {
  ctx.value.beginPath()
  ctx.value.moveTo(x1, y1)
  ctx.value.lineTo(x2, y2)
  ctx.value.stroke();
}

</script>